<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <script src="/static/js/jquery-3.6.0.js"></script>
    <link href="/static/css/register.css" rel="stylesheet"/>
    <link href="/static/bootstrap-4.6.1-dist/css/bootstrap.css" rel="stylesheet">
    <link href="/static/bootstrap-4.6.1-dist/css/bootstrap-reboot.css" rel="stylesheet">
    <link href="/static/bootstrap-4.6.1-dist/css/bootstrap-grid.css" rel="stylesheet">
    <script src="/static/bootstrap-4.6.1-dist/js/bootstrap.bundle.js"></script>
    <script src="/static/bootstrap-4.6.1-dist/js/bootstrap.js"></script>

    <meta name="theme-color" content="#563d7c">
    <style>

        @media (min-width: 768px) {
        }
        .toback{
            border-radius: 100%;
            width: 8000px;
            height: 8000px;
            position: absolute;
            left: -4000px;
            top: -4000px;
            background-color: lightblue;
            cursor: pointer;
            z-index: 999;
        }
        .toback:hover{
            background-color: lightskyblue;
        }
    </style>
    <!-- Custom styles for this template -->
    <!--<link href="/static/css/signin.css" rel="stylesheet">-->
</head>
<body class="text-center" id="register-bodystyle">
<div class="toback" id="tb"><span id="backan" style="position: absolute;top: 110px; left: 115px; font-size: 24px; display: block">返回</span></div>
<form class="form-register" action="#" method="post" id="register_data">
    <img class="mb-4" src="/static/image/Cloudy.svg" alt="" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal">Please Register</h1>
    <!--<label for="inputEmail" class="sr-only">Email address</label>-->
    <input type="text" class="form-control" placeholder="用户名" name="user_name" id="user_name" >
    <!--<div class="input-group mb-3">-->
        <input type="email" class="form-control" placeholder="邮箱" name="user_email" id="user_email" >
        <!--<div class="input-group-append">-->
        <!--   <span id="email_MSG"></span>-->
        <!--</div>-->
    <!--</div>-->
    <span id="email_MSG" style="font-size: 16px;color: red;position: absolute;top: 42%;left: 58%; z-index: 12; user-select: none"></span>
    <!--<label for="inputPassword" class="sr-only">Password</label>-->
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="验证码" name="Verification_code" id="Verification_code" >
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" id="send_code" disabled title="请先输入邮箱。" type="button">发送验证码</button>
        </div>
    </div>
    <span id="code_MSG" style="font-size: 16px;color: red;position: absolute;top: 47%;left: 58%; z-index: 12; user-select: none"></span>
    <input type="password" class="form-control" placeholder="请输入至少6位密码" name="user_password" id="user_password">
    <input type="password" class="form-control" placeholder="确认密码" id="Confirm_password">
    <button class="btn btn-lg btn-primary btn-block" type="button" id="register" title="请先填写表单" disabled>注册</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2022-2022</p>
</form>

<script>
    var flag0=false;
    var flag1=false;
    var flag2=false;
    var flag3=false;
    //注册按钮，提交事件
    $('#register').click(function (){
        const params = $('#register_data').serializeArray();
        const j = {};
        for (const item in params) {
            j[params[item].name] = params[item].value;
        }
        $.ajax({
            url:'/user/adduser',
            data:JSON.stringify(j),
            type:'post',
            dataType:'json',
            headers:{
                Accept:"application/json",
                "Content-Type":"application/json"
            },
            processData:false,
            cache:false
        }).done(function (data) {
            if (data.code===10000){
                alert("注册失败，请重试。");
            }else if (data.code===20000){
                window.location="/pages/index.html";
            }
        });
    })

    //邮箱检测
    $('#user_email').blur(function () {
        var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        if ($(this).val() == "" || !myreg.test($(this).val())){
            $('#email_MSG').text("未填写或错误的邮箱格式");
            $('#send_code').attr('disabled',true);
            $('#send_code').attr('title',"请先输入邮箱");
        }
        else{
            $('#email_MSG').text("");
            const params = $('#user_email').serializeArray();
            const j = {};
            for (const item in params) {
                j[params[item].name] = params[item].value;
            }
            $.ajax({
                url:'/user/queryemail',
                data:JSON.stringify(j),
                type:'post',
                dataType:'json',
                headers:{
                    Accept:"application/json",
                    "Content-Type":"application/json"
                },
                processData:false,
                cache:false
            }).done(function (data) {
                if (data.code==10000){
                    $('#email_MSG').text(data.message);
                }else if (data.code==20000){
                    $('#send_code').attr('disabled',false);
                    $('#send_code').attr('title',"点击发送验证码");
                }
            });
        }
    })

    //发送验证码
    var mytime;//定时函数
    var minth=60;//倒计时初始值
    var check_code;
    $('#send_code').click(function (){
        mytime = setInterval(djs,1000);
        var code="";
        var codes=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
        for (var i=0;i<6;i++){
            var k = codes[Math.floor(Math.random()*codes.length)];
            code+=k;
        }
        check_code=code;
        const j = {"Verification_code":code,"user_email":$('#user_email').val()};
        $.ajax({
            url:'/user/sendemail',
            data:JSON.stringify(j),
            type:'post',
            dataType:'json',
            headers:{
                Accept:"application/json",
                "Content-Type":"application/json"
            },
            processData:false,
            cache:false
        }).done(function (data) {
        });
    })
    $('#Verification_code').change(function() {
        var in_code=$(this).val();
        if (in_code===check_code){
            $('#code_MSG').text("");
            flag1=true;
            if (flag0===true && flag1===true && flag2===true && flag3===true)$('#register').removeAttr('disabled').attr('title',"点击注册");
        }else{
            $('#code_MSG').text("验证码错误");
            flag1=false;
            $('#register').attr('disabled',true).attr('title',"请先填写表单");
        }
    })
    function djs() {
        minth = --minth;
        if (minth>0){//还没有倒计时结束
            $("#send_code").text('('+minth+'秒)后重发').attr("disabled","disabled");
        }else{//倒计时结束
            $("#send_code").removeAttr("disabled").text('重新发送');
            minth = 60;//重新初始化
            clearInterval(mytime);//清除定时函数
        }
    }
    $("#user_password").change(function() {
        if ($(this).val().length>=6){
            flag2=true;
            if (flag0===true && flag1===true && flag2===true && flag3===true)$('#register').removeAttr('disabled').attr('title',"点击注册");
        }else{
            flag2=false;
            $('#register').attr('disabled',true).attr('title',"请先填写表单");
        }
    })
    $('#Confirm_password').change(function (){
        if ($(this).val()===$('#user_password').val()){
            flag3=true;
            if (flag0===true && flag1===true && flag2===true && flag3===true)$('#register').removeAttr('disabled').attr('title',"点击注册");
        }else{
            flag3=false;
            $('#register').attr('disabled',true).attr('title',"请先填写表单");
        }
    })
    $('#user_name').change(function (){
        if ($(this).val()!=null){
            flag0=true;
            if (flag0===true && flag1===true && flag2===true && flag3===true)$('#register').removeAttr('disabled').attr('title',"点击注册");
        }else{
            flag0=false
            $('#register').attr('disabled',true).attr('title',"请先填写表单");
        }
    })
</script>
<script>
    $('#tb').click(function (){
        $('#backan').css('disabled','none');

        $('#tb').animate({
            left:'-4000px',
            top:'-4000px',
            width:'8000px',
            height:'8000px'
        },2000,'linear',function(){
            $(window).attr('location',"/pages/signin.html");
        }).css('background-color','lightskyblue')
    })
    $(document).ready(function (){
        $('#tb').animate({
            left:'-100px',
            top:'-100px',
            width:'200px',
            height:'200px'
        },2000).css('background-color','lightskyblue')
    })
</script>
</body>
</html>